import React from 'react'
import { IApiItem, IVariableItem } from '../../../../utils/interfaces'
import VariableValue from './VariableValue'
import { Message, Tag } from '@arco-design/web-react'
import classNames from 'classnames'

interface IVariablesProps {
    // updateKey，当这个值发生变化时更新内部状态
    updateKey?: string
    // 是默认期望吗
    isDefault?: boolean
    // 默认期望中的变量值
    defaultExpectVariables?: IApiItem['variables']
    // 值
    value: IApiItem['variables']
    // 改变
    onChange: (value: IApiItem['variables']) => void
}

const Variables: React.FC<IVariablesProps> = ({
    // updateKey,
    // isDefault,
    // defaultExpectVariables,
    value,
    onChange: propsOnChange,
}) => {
    // 变化
    const handleChange = <K extends keyof IVariableItem>(
        index: number,
        key: K,
        newValue: IVariableItem[K],
    ) => {
        const oldValue = value || []
        const cloned = [...oldValue]
        cloned[index] = {
            ...cloned[index],
            [key]: newValue,
        }
        propsOnChange(cloned)
    }

    return (
        <div className='flex flex-wrap'>
            {value?.map((vItem, index) => {
                return (
                    <div
                        className='group/item flex items-center px-2 mb-1 w-1/2'
                        key={vItem.id}
                    >
                        <div className='mr-1'>{vItem.name}:</div>
                        <VariableValue
                            value={vItem.value}
                            variableItem={vItem}
                            onChange={(v) => handleChange(index, 'value', v)}
                        />
                        <Tag
                            className={classNames(
                                `shrink-0
                                ml-1
                                    flex items-center justify-center 
                                    rounded-md cursor-pointer text-gray-500 px-1`,
                                {
                                    '!hidden group-hover/item:!block':
                                        !vItem?.useMock,
                                },
                            )}
                            size='small'
                            color='blue'
                            checkable
                            checked={vItem?.useMock}
                            onCheck={(checked) => {
                                if (checked && !vItem?.mockRule) {
                                    Message.warning({
                                        content: '使用mock无效：未填写mock规则',
                                        position: 'bottom',
                                        closable: true,
                                    })
                                }
                                handleChange(index, 'useMock', checked)
                            }}
                        >
                            M
                        </Tag>
                    </div>
                )
            })}
        </div>
    )
}

export default Variables
